<template>
<div style="background-color: #F5F5F5;">
  <div class="playmain">
    <div class="g-wrap">
      <div class="u-title">
        <h3>
          <span>热门新碟</span>
        </h3>

      </div>
    </div>
    <ul class="m-cvrlst">
      <li v-for="(item,index) in albumList" :key="index">
        <div class="u-cover">
          <img v-lazy="item.blurPicUrl" alt=""  :title="item.name">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" class="msk" :title="item.name"></router-link>
          <a href="#" title="播放"  class="u-name"></a>
        </div>
        <p class="first">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
        </p>
        <p class="second">
          <span class="nm">
            <router-link :to="{name:'Work',params:{id:item.artist.id}}" :title="item.artist.name">{{item.artist.name}}</router-link>
          </span>
        </p>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      albumList:[]
    }
  },
  methods:{
    async getHotAlbum(){
      // limit=30,offset=0,area="ALL"
      let result = await this.$API.reqAlbumNewSet()
      this.albumList = result.data.albums.slice(0,10)
    }
  },
  mounted() {
    this.getHotAlbum()
  }

}
</script>

<style scoped lang="less">
.playmain {
  width: 980px;
  height: auto;
  padding: 40px 0 40px 0;
  overflow: hidden;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  .g-wrap {
    width: 980px;
    margin: 0 auto;

    .u-btn-hot {

      background-image: url("../../assets/button.png");
    }

    .u-title {
      width: 900px;
      height: 42px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #C20C0C;

      h3 {
        width: 151px;
        height: 33px;
        float: left;

        span {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 24px;
          font-weight: normal;
          float: left;
        }

        a {
          margin-left: 10px;
          border: 1px solid #C3C3C3;
          border-radius: 5px;
          display: inline-block;
          width: 91px;
          height: 31px;
          text-align: center;
          line-height: 31px;
          float: left;
          background-color: #F6F6F6;

          i {
            color: #0c73c2;
            font-weight: normal;

            em {
              display: inline-block;
              width: 8px;
              height: 5px;
              background: url("../../assets/icon.png") -70px -543px;
            }
          }
        }
      }

      .u-btn {
        margin-left: auto;
        width: 46px;
        height: 29px;
        text-align: center;
        line-height: 29px;
        border-radius: 3px;
        background-position: 0 0;
        background-color: #CA0C0E;

        a {
          color: white;
        }
      }
    }
  }
  .m-cvrlst {
    width: 950px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    padding-bottom: 10px;

    li {
      width: 190px;
      height: 218px;
      margin-left: -4px;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      &:hover .u-cover .u-name{
        display: block;
      }

      .u-cover {
        width: 130px;
        height: 130px;
        margin: 0 auto;
        position: relative;
.msk{
  width: 153px;
  height: 130px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../assets/coverall.png");
  background-position: 0 -845px;
}
        .u-name {
          left: 94px;
          width: 28px;
          height: 28px;
          display: none;
          position: absolute;
          right: 10px;
          bottom: 5px;
          background-image: url("../../assets/icn_ply2.png");
          background-position: 0 -140px;
        }

        img {
          width: 130px;
          height: 130px;
        }

        a {
          width: 140px;
          display: inline-block;
        }
      }

      .first {
        width: 130px;
        margin: 6px auto;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        a {
          display: inline-block;
          max-width: 100%;
          _width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          color: #000;
          vertical-align: middle;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .second {
        margin: 0 auto;
        width: 130px;
        display: flex;
        align-items: center;

     .nm{
       display: inline-block;
       max-width: 85%;
       vertical-align: middle;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-wrap: normal;
       a{
         color: #666;
       }
     }

        img {
          width: 13px;
          height: 13px;
        }
      }

    }
  }
}
</style>